
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Album example · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">

    

    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    
  </head>
  <body>
    
<header>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <img src="../static/image/zzx.png" alt="logo" width="60" height="60" >
        <strong>WangYue</strong>
      </a>
    </div>
  </div>
</header>
<main>

  <section class="py-5 text-center container">

   <div class="modal-dialog" role="document">
      <div class="modal-content rounded-6 shadow rounded-4">
        <div class="modal-body p-5">

          <form method="post" action="/result_name">

            <h1 class="h3 mb-5 fw-normal">请输入 First & Last Name</h1>
            <div class="form-floating">
              <input type="text" class="form-control" name="firstname" id="firstname"  value="" required="" placeholder="First Name">
              <label for="firstname">First Name</label>

            </div>
            <br>
            <div class="form-floating">
              <input type="text" class="form-control" name="lastname" id="lastname"  value="" required="" placeholder="Last Name">
              <label for="lastname">Last Name</label>
            </div>

            <div class="checkbox mb-5">

            </div>
            <button class="w-100 btn btn-lg btn-primary rounded-4" type="submit" input type="submit" >提交</button>
          </form>


        </div>
      </div>
    </div>

  </section>


</main>

  <footer class="text-muted py-2">
  <div class="container">
    <p class="float-end mb-2">
      <a href="hello">Back</a>
    </p>
    </div>
</footer>



  </body>
</html>
<style>
.col-sm-6{
    margin: 0 auto;
}
body {
background-image: linear-gradient( #636363,#a2ab58);
  animation: bg-color 10s infinite;

  -webkit-animation: bg-color 10s infinite;

}
a{

text-decoration:none;
color:#333;
}
@keyframes bg-color {

    0% {
        background-image: linear-gradient(to right, #7F7FD5, #86A8E7, #91EAE4)
    }

    100% {
        background-image: linear-gradient(to right, #91EAE4, #6be585)
    }
}

</style>